<template>
  <page-wrap back hide-tab title="服务管理" stay-still>
    <view class="service-manage">
      <view class="tips">
        <image :src="error" class="error"></image>
        <view class="title">提示</view>
      </view>
      <view class="content">
        <view>
          请根据实际情况以及擅长的服务类型选择开启或关闭以下服务，服务可随时设置开启或关闭；
        </view>
        <view>
          请注意只要有任意服务开启，用户端即会显示该顾问处于<text class="deep"
            >在线</text
          >状态，在线状态下<text class="deep"
            >顾问需要及时回复咨询信息并提供服务</text
          >，全部关闭后则不会显示在线状态，服务价格不可修改，如有疑问请联系客服。
        </view>
      </view>
      <view class="service-list">
        <view
          class="service-card"
          v-for="service in serviceList"
          :key="service.serviceName"
        >
          <view class="header">
            <view class="title">{{ service.serviceName }}</view>
            <u-switch
              v-model="service.isOpen"
              :active-value="1"
              :inactive-value="0"
              size="40"
              active-color="#F75A3E"
              @change="(val) => handleCheckChange(val, service)"
            ></u-switch>
          </view>
          <view class="tips" v-if="service.tips">{{ service.tips }}</view>
          <view class="phoneMessage" v-if="service.serviceName == '电话咨询'">
            请确认电话是否正确，如有误请在“我的资料”修改
          </view>
          <view class="content">
            <view class="item">
              <text class="title">服务价格（元）</text>
              <text class="price"
                ><text class="title">￥</text> {{ service.originPrice }}</text
              >
            </view>
            <view class="item">
              <text class="title">优惠价格（元）</text>
              <text class="price"
                ><text class="title">￥</text> {{ service.price }}</text
              >
            </view>
          </view>
          <view class="footer">
            <view class="left" v-if="service.serviceName == '电话咨询'">
              <text class="title">服务电话：</text>
              <text class="tel">{{ service.phone }}</text>
            </view>
            <view class="right" @click="handleCheckDetail"
              >服务详情
              <u-icon
                name="arrow-right"
                class="arrow"
                color="#888888"
                size="26"
              ></u-icon
            ></view>
          </view>
        </view>
      </view>
    </view>
  </page-wrap>
</template>

<script>
import {
  consultantServicePage,
  openConsultantService,
} from "@/api/modules/career";
export default {
  components: {},
  name: "index",
  data() {
    return {
      personId: uni.getStorageSync("person-id").slice(2) || "",
      error: this.$imgBase + "career/careerAssessResult/error.png",
      serviceList: [],
    };
  },
  onLoad(opt) {},
  onShow() {},
  created() {
    this.consultantServicePageFn();
  },
  mounted() {},
  methods: {
    handleCheckDetail() {
      uni.showToast({ icon: "none", title: "功能等待开放" });
    },
    consultantServicePageFn() {
      const params = {
        consultantId: parseInt(this.personId),
      };
      consultantServicePage(params).then((res) => {
        if (res.code == 200) {
          res.data.forEach((item) => {
            item.checked = !!item.isOpen;
          });
          this.serviceList = res.data;
        }
      });
    },
    handleCheckChange(val, service) {
      const params = {
        consultantId: parseInt(this.personId),
        serviceId: service.serviceId,
        useStatus: val,
      };
      openConsultantService(params).then((res) => {
        if (res.code == 200) {
          uni.showToast({ icon: "", title: "修改成功！" });
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.service-manage {
  padding: 32rpx;
  .tips {
    display: flex;
    align-items: center;
    color: #959595;
    margin-bottom: 12rpx;
    .error {
      width: 30rpx;
      height: 30rpx;
      margin-right: 8rpx;
    }
    .title {
      font-size: 26rpx;
    }
  }
  .content {
    font-size: 26rpx;
    color: #888;
    line-height: 48rpx;
    .deep {
      color: #302f2f;
    }
  }
  .service-list {
    .service-card {
      padding: 34rpx 32rpx 24rpx;
      background-color: #fff;
      margin: 18rpx 0;
      border-radius: 16rpx;
      .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        // margin-bottom: 34rpx;
        .title {
          font-size: 32rpx;
          color: #222;
          font-weight: 600;
        }
      }
      .tips {
        font-size: 22rpx;
        color: #888888;
        margin-top: 12rpx;
      }
      .phoneMessage {
        font-size: 22rpx;
        font-weight: 400;
        color: #888888;
        line-height: 32rpx;
        margin-top: 10rpx;
      }
      .content {
        margin-top: 26rpx;
        .item {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 2rpx 0;
          .title {
            font-size: 28rpx;
            color: #666666;
          }
          .price {
            font-size: 36rpx;
            color: #555555;
            font-weight: 500;
          }
        }
      }
      .footer {
        padding-top: 20rpx;
        border-top: 1px solid #f5f5f5;
        display: flex;
        align-items: center;
        .left {
          .title {
            font-size: 28rpx;
            color: #888888;
          }
          .tel {
            font-size: 28rpx;
            color: #222222;
          }
        }
        .right {
          margin-left: auto;
          display: flex;
          align-items: center;
          font-size: 24rpx;
          color: #888888;
          line-height: 32rpx;
          .arrow {
            margin-left: 18rpx;
            margin-top: 5rpx;
          }
        }
      }
    }
  }
}
</style>
